import { DEBUG } from "@/config";
import { Html, Instance } from "@react-three/drei";
import { GroupProps, useFrame } from "@react-three/fiber";
import { useRef } from "react";
import { Color, InstancedMesh } from "three";

export default function Diamond({
  speed,
  id,
  ...props
}: { id: number; speed: number; color?: Color } & GroupProps) {
  const ref = useRef<InstancedMesh>(null);
  useFrame((state) => {
    if (!ref.current || DEBUG) return;
    const t = state.clock.getElapsedTime() + speed * 10000;
    ref.current.position.y = (Math.sin(t / 1.5) + 1) / 3;

    if (id === 2) {
      ref.current.rotation.y += 0.02;
    }
  });

  return (
    <group {...props}>
      <Instance ref={ref}>
        {id == 2 && (
          <Html position={[0, 0.4, 0]} center style={{ pointerEvents: "none" }}>
            <img src={"./shiny.png"} alt="" className="card" />
          </Html>
        )}
      </Instance>
    </group>
  );
}
